<template>
  <!-- <n-card :bordered="false" class="proCard">
    <BasicTable
      title="表格列表"
      titleTooltip="这是一个提示"
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="actionRef"
      @edit-end="editEnd"
      @edit-change="onEditChange"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1360"
    >
      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </BasicTable>
  </n-card> -->
  <div>
    <div>
      <n-space vertical>
        <n-select id="select" v-model:value="value" :options="options" @update:value="change1" />
      </n-space>
    </div>
    <div>
      <n-table :bordered="false" :single-line="false">
        <thead>
          <tr align="center">
            <th>会议室ID</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>申请原因</th>
            <th>申请状态</th>

            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in itmes" :key="item.id" align="center">
            <td>{{ item.meetroomid }}</td>
            <!-- <td>{{ item.begindate.toLocaleString().replace(/[A-Z]{1,2}/, ' ') }}</td> -->
            <td>{{ format(new Date(item.begindate), 'yyyy-MM-dd HH:mm:ss') }}</td>
            <td>{{ format(new Date(item.enddate), 'yyyy-MM-dd HH:mm:ss') }}</td>
            <!-- <td>{{ item.enddate.toLocaleString().replace(/[A-Z]{1,2}/, ' ') }}</td> -->
            <td>{{ item.applyreason }}</td>
            <td>{{ item.status == 0 ? '未审批' : item.status == 1 ? '已通过' : '未通过' }}</td>
            <td>
              <NButton @click="agree(item)">同意</NButton>
              <NButton @click="refuse(item)">拒绝</NButton>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { http } from '@/utils/http/axios';
  import { NButton } from 'naive-ui';
  import { ref } from 'vue';
  import { format } from 'date-fns';
  const arr: any = [];
  const itmes: any = ref([]);
  const value = ref('every');
  const options = [
    {
      label: '所有',
      value: 'every',
    },
    {
      label: '已通过',
      value: 1,
    },

    {
      label: '未通过',
      value: 2,
    },
    {
      label: '未审批',
      value: 0,
    },
  ];
  type FormState = {
    code: Number;
    message: String;
    result: Array<any>;
  };
  const getItme = async () => {
    const a = await http.request<any>({ url: '/meetingroomapply', method: 'GET' });
    // console.log(a);
    for (let i = 0; i < a.length; i++) {
      arr.push(a[i]);
      // console.log(a[i]);
    }
    itmes.value = arr;
    // console.log(a.length);
    // console.log(itmes);

    return a;
  };
  // // const itmes = getItme();
  getItme();

  const agree = async (item: any) => {
    // console.log(item);
    // console.log(item.begindate.toLocaleString().replace(/:\d{1,2}$/, ''));

    const a = await http.request<FormState>({
      url: `/meetingroomapply/apply/${item.id}`,
      method: 'put',
      data: {
        id: item.id,
        begindate: item.begindate.toLocaleString().replace(/[A-Z]{1,2}$/, ''),
        enddate: item.enddate.toLocaleString().replace(/[A-Z]{1,2}$/, ''),
        applyreason: item.applyreason,
        status: 1,
      },
    });
    console.log(a);
    location.reload();
  };
  const refuse = async (item: any) => {
    const a = await http.request<FormState>({
      url: `/meetingroomapply/apply/${item.id}`,
      method: 'put',
      data: {
        id: item.id,
        begindate: item.begindate.toLocaleString().replace(/[A-Z]{1,2}$/, ''),
        enddate: item.enddate.toLocaleString().replace(/[A-Z]{1,2}$/, ''),
        applyreason: item.applyreason,
        status: 2,
      },
    });
    console.log(a);
    location.reload();
  };
  const change1 = (value: number | string): any => {
    // console.log(value);
    if (value == 'every') {
      itmes.value = [];
      itmes.value = arr;
      console.log(itmes);
    } else if (value == 1) {
      itmes.value = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status == 1) {
          itmes.value.push(arr[i]);
        }
      }
    } else if (value == 2) {
      itmes.value = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status == 2) {
          itmes.value.push(arr[i]);
        }
      }
    } else if (value == 0) {
      itmes.value = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status == 0) {
          itmes.value.push(arr[i]);
        }
      }
    }
  };
  // import { reactive, ref } from 'vue';
  // import { BasicTable } from '@/components/Table';
  // import { getTableList } from '@/api/table/list';
  // import { columns } from './CellColumns';

  // const actionRef = ref();
  // const params = reactive({
  //   pageSize: 5,
  //   name: 'xiaoMa',
  // });

  // function onEditChange({ column, value, record }) {
  //   if (column.key === 'id') {
  //     record.editValueRefs.name4.value = `${value}`;
  //   }
  //   console.log(column, value, record);
  // }

  // const loadDataTable = async (res) => {
  //   return await getTableList({ ...params, ...res });
  // };

  // function onCheckedRow(rowKeys) {
  //   console.log(rowKeys);
  // }

  // function reloadTable() {
  //   console.log(actionRef.value);
  //   actionRef.value.reload();
  // }

  // function editEnd({ record, index, key, value }) {
  //   console.log(value);
  // }
</script>

<style lang="less" scoped></style>
